<template>
  <ElInput v-model="value" disabled>
    <template #append>
      <ElButton type="primary" @click="onClick">编辑</ElButton>
    </template>
  </ElInput>
</template>
<script setup lang="ts">
  import { ElButton, ElInput } from 'element-plus';
  import JsonInputPanel from './JsonInputPanel.vue';
  import { ref } from 'vue';
  import { open } from '@/components/Popup';

  const props = defineProps<{modelValue?: Record<string, any>}>()
  const emits = defineEmits(['update:modelValue'])

  const value = ref<string>()
  function onClick() {
    open({title: '编辑JSON'}, JsonInputPanel, { modelValue: props.modelValue, 'onUpdate:modelValue': update})
  }

  function update(value: Record<string, any>) {
    console.log('value edit', value)
  }

  // watch(() => data.value, () => emits('update:modelValue', ))
</script>